import React,{memo,useState,useEffect,useRef} from 'react'
import { connect } from 'react-redux'
import play from '../../assets/images/play.png'
import Scroll from '../../baseUI/scroll'
import thumbs_up from '../../assets/images/thumbs-up.png'
import thumbs_up_active from '../../assets/images/thumbs-up_active.png'
import share from '../../assets/images/share.png'
import comment_pic from '../../assets/images/comment.png'
import * as actionTypes from './store/actionCreators'
import { useLocation,useHistory } from "react-router-dom"
import loading from '../../assets/images/loading.gif'
import "./Info.css"
let pageNo=1 ;
let commentsArray=[];
let MusicIdArray = [441491828,1921230284,255589,488249475,1330348068,1336205537,1430319727];    
var musicId = 441491828;
let SetMusic = 0;


const Info = (props) => {
    // console.log(props,'111');

    const {getDetailDataDispatch,comment={}} =props
    const {comments=[]} =comment
    const history = useHistory()
    let [page, setPage] = useState(1)
    let [index,setIndex] = useState(0);
    let [isThumb,setIsThumb] =useState(true)
    // console.log(comments)
    function debounce(fn,delay){
        let timer = null //借助闭包
        return function() {
            if(timer){
                clearTimeout(timer) 
            }
            timer = setTimeout(fn,delay) // 简化写法
        }
    }


    useEffect(()=>{
        if(commentsArray.length==0){
            commentsArray=comments
        }
        
    },[comments])
    
    const handlePullUp = () => {
        // console.log(commentsArray,'111111111')
        commentsArray = [...commentsArray, ...comments];
        // console.log('上啦');
        debounce(setPage(++page),3000)
        ;
        pageNo=page
        // console.log(commentsArray,'no')
    }
    // 下拉刷新
    
    
    const handlePullDown = () => {
        
        // console.log('下拉')
        getDetailDataDispatch()
        if(SetMusic>=MusicIdArray.length-1){
            SetMusic=SetMusic-MusicIdArray.length
        }
        else{
            ++SetMusic
        }
        
        musicId = MusicIdArray[SetMusic]
        commentsArray = comments
        // console.log(musicId)
        
    }
    useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [pageNo])
    useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [musicId])
   
    return (
        <div className="info_main">
            <div className="container_top_my">
                <div className="topBar">
                    <div className="section">
                        <div className={`option ${index ==0 ? "active": "" }`} >
                            广场
                        </div>
                
                    </div>
            
                </div>
            </div>
            <div className="comment_scroll_container">
            <Scroll direction={"vertical"} refresh={false}  pullUp={handlePullUp} pullDown={handlePullDown}
                onScroll = {(e) => {
                    // console.log(e)
                    if (e.y < -1142) {
                        
                    } else {
                       
                    }
                   
                }}
                >
                <div className="comment_container">
                    {
                        commentsArray?
                        commentsArray.map((item,index)=>{
                            return(
                                
                                <div className="comment_body" key={index}>
                                    <div className="comment_head">
                                        <div className="user_avatar_comment"  style={{backgroundImage: `url(http://p1.music.126.net/m0Yl_mLhurz_QUnkEK8VBg==/109951165525190298.jpg)` }}>
                                            <img src={item.user.avatarUrl?item.user.avatarUrl:loading} alt="" className='user_avatar_src' />
                                        </div>
                                        <div className="username_word">
                                            {item.user.nickname}
                                        </div>
                                    </div>
                                    <div className="comment_word">
                                        {
                                            item.content
                                        }
                                    </div>
                                    <div className="comment_icons">
                                        <div className="comment_share">
                                                <img src={share} alt="" className='comment_share_pic'/>
                                                <div className="share_word">
                                                        分享
                                                </div>

                                        </div>
                                        <div className="comment_comment">
                                            <img src={comment_pic} alt="" className='comment_comment_pic'/>
                                                <div className="comment_comment_num">
                                                        {item.showFloorComment.replyCount}
                                                </div>

                                        </div>
                                        <div className="comment_thumbs_up" onClick={setIsThumb.bind(this,!isThumb)}>
                                            <img src={isThumb?thumbs_up:thumbs_up_active} alt="" className='comment_thumbs_up_pic'/>
                                            <div className="comment_thumbs_up_num">
                                                    {item.likedCount}
                                            </div>
                                        </div>
                                        
                                        

                                    </div>
                                </div>

                            )
                            

                        }):<></>

                            
                            

                        
                    }
                    

                </div>
            </Scroll>
            </div>
            
        </div>
        
    )
}
const mapStateToDispatch = (dispatch) => {
    // console.log(dispatch); 
   
    return {
        getDetailDataDispatch() {
            dispatch(actionTypes.getComment(musicId,pageNo))
            
            
        }
    }
}
const mapStateToProps = (state) => {
    // console.log(state,'state')
    
    return {
        comment:state.info.comment,
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(Info))
